/*var myData = ['CDN', '专线', '云计算', 'IDC']
var databeast = [389, 259, 262, 324]
var databeauty = [121, 388, 233, 309]
var sum=function(data){
	var sum=0;
	for(var i=0;i<data.length;i++){
		sum+=data[i]
	}
	return sum
}
var option = {
    baseOption: {
        timeline: {
            show: false,
            top: 0,
            data: []
        },
        legend: {
            show: false
        },
        grid: [{
            show: false,
            left: '10%',
            top: '10%',
            bottom: '10%',
            containLabel: true,
            width: '30%'
        }, {
            show: false,
            left: '56%',
            top: '10%',
            bottom: '10%',
            width: '0'
        }, {
            show: false,
            right: '10%',
            top: '10%',
            bottom: '10%',
            containLabel: true,
            width: '30%'
        }],

        xAxis: [{
            type: 'value',
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            position: 'top',
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        }, {
            gridIndex: 1,
            show: false
        }, {
            gridIndex: 2,
            nameTextStyle: {
                color: '#50afff',
                fontSize: 14
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            position: 'top',
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'category',
            inverse: true,
            position: 'right',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            data: myData
        }, {
            gridIndex: 1,
            type: 'category',
            inverse: true,
            position: 'center',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
              show: true,
              color: '#fff',
              fontSize: 12
            },
            data: myData
        }, {
            gridIndex: 2,
            type: 'category',
            inverse: true,
            position: 'left',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false

            },
            data: myData
        }],
        series: []

    },
    options: []
}

option.options.push({
    tooltip: {
        trigger: 'item',
        formatter: '{b}:{c}'
    },
    series: [{
        type: 'bar',
        barWidth: '40%',
        label: {
            normal: {
              show: true,
              position: 'left',
              offset: [0, 0],
              formatter: function(param){
//            	console.log(param.data)
              	return parseInt(param.data/sum(databeast)*100)+'%'
              },
              textStyle: {
                  color: '#fff',
                  fontSize: 12
              }
            }
        },
        itemStyle: {
            normal: {
                color: function(params) {
                    // build a color map as your need.
                    var colorList = ['#54c6ff','#e65d58','#ffbe58','#28d3aa'];
                    return colorList[params.dataIndex]
                },
//              barBorderRadius: 50
            }
        },

        data: databeast
    }, {
        type: 'bar',
        barWidth: '40%',
        xAxisIndex: 2,
        yAxisIndex: 2,
        label: {
            normal: {
              show: true,
              position: 'right',
              offset: [0, 0],
              textStyle: {
                  color: '#fff',
                  fontSize: 12
              },
              formatter: function(param){
//            	console.log(param.data)
              	return parseInt(param.data/sum(databeast)*100)+'%'
              }
            }
        },
        itemStyle: {
            normal: {
                color: function(params) {
                    // build a color map as your need.
                    var colorList = ['#54c6ff','#e65d58','#ffbe58','#28d3aa'];
                    return colorList[params.dataIndex]
                },
//              barBorderRadius: 50
            }
        },
        data: databeauty
    }]
})

var myBarChart = echarts.init(document.getElementById('myBarList'))
myBarChart.setOption(option);*/
//var myData = ['CDN', '专线', '云计算', 'IDC']
//var databeast = [389, 259, 262, 324]
var pieLeftBottom1=[
	{value:40000000, name:'IDC',labelLine:{show:true}},
    {value:478000, name:'CDN'},
    {value:5190000, name:'云计算'},
    {value:675268, name:'专线'}
]
var pieLeftBottom2=[
	{value:1290000, name:'IDC',labelLine:{show:true}},
	{value:548000, name:'云计算'},
	{value:3440000, name:'CDN'},
	{value:606605, name:'专线'}
]
var pieLeftBottom3=[
		{
		    value: 3934,
		    name: 'IDC',
		    labelLine:{show:true}
		}, {
            value: 2676,
            name: 'CDN'
        }, {
            value: 1651,
            name: '云计算'
        }, {
            value: 437,
            name: '专线'
        }]
//var databeauty = [121, 388, 233, 309]
var pieOptionLeftBottom = {
    title: {
        text: "",
        subtext: "",
        left: "center",
        textStyle: {
            color: "#fff",
            fontSize: 18
        },
    },
		color:['#2191d8','#8421d8','#d88821','#88ff4e'],
		legend: {
			show:true,
//      orient: 'vertical',
//      x: 'left',
				bottom:'bottom',
        textStyle: {
            color: "#fff",
//          fontSize: 18
        },
        data:['IDC','云计算','专线','CDN']
    },
    tooltip: {
        trigger: 'item',
        confine: true,
        formatter: "{a} <br/>{b}:{c}({d}%)"
    },
    series: [{
        name: 'IP地址',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '13%'],
        center: ['50%','47%'],
        z:3,
        label: {
        	color:'#fff',
        	formatter:function(parmas){
        		if(parmas.data.name=='IDC'){
        			return 'IP地址'
        		}else{
        			return ''
        		}
        	},
        	emphasis:{
        		show:false
        	}
        },
        labelLine: {
          show:false,
          length:50,
          length2:50,
          lineStyle:{
          	color:"#fff"
          },
          emphasis:{
          	lineStyle:{
//        		show:true,
	          	color:"#fff"
	          }
          }
        },
        data: pieLeftBottom1
    }, {
        name: '顶级域名',
        type: 'pie',
        radius: ['20%', '43%'],
        z:2,
        center: ['50%','47%'],
        labelLine: {
          show:false,
          length:40,
          lineStyle:{
          	color:"#fff"
          },
          emphasis:{
//        	show:true,
          	lineStyle:{
	          	color:"#fff"
	          }
          }
        },
        label: {
        	show:true,
        	color:'#fff',
        	formatter:function(parmas){
        		if(parmas.data.name=='IDC'){
        			return '顶级域名'
        		}else{
        			return ''
        		}
        	}
        },
        data:pieLeftBottom2
    }, {
        name: '机房',
        type: 'pie',
        radius: ['51%', '75%'],
        center: ['50%','47%'],
        z:1,
        label: {
        	color:'#fff',
        	formatter:function(parmas){
        		console.log(parmas,'----123455-')
        		if(parmas.data.name=='IDC'){
        			return '机房'
        		}else{
        			return ''
        		}
        	}
        },
        labelLine:{
        	show:false,
        	lineStyle:{
          	color:"#fff"
          },
          emphasis:{
//        	show:true,
          	lineStyle:{
	          	color:"#fff"
	          }
          }
        },
        data: pieLeftBottom3
    }]
};
var myBarChart = echarts.init(document.getElementById('myBarList'))
myBarChart.setOption(pieOptionLeftBottom)


//列表数据
var listData=[
    {name:'北京',value:88,per:0},
    {name:'广东',value:66,per:0},
    {name:'上海',value:59,per:0},
    {name:'浙江',value:37,per:0},
    {name:'山东',value:37,per:0},
    {name:'河北',value:34,per:0},
    {name:'江苏',value:34,per:0},
    {name:'福建',value:28,per:0},
    {name:'天津',value:24,per:0},
    {name:'四川',value:23,per:0},
]
function barEVT(listData,ele){
	var max=0
	for(var i=0;i<listData.length;i++){
		if(max <= listData[i].value){
			max = listData[i].value;
		}
	}
	for(var i=0;i<listData.length;i++){
		listData[i].per=(listData[i].value/max)*100+"%"
	}
	for(var j=0;j<listData.length;j++){
		 $(ele).find(".barList").append("<li>"+
	       /*"<div><span>"+(j+1)+"</span></div>"+*/
		   "<div style='color:#bed8e0'>"+(j+1)+"</div>"+
	       "<div style='color:#bed8e0' title="+listData[j].name+">"+listData[j].name+"</div>"+
	       "<div><p class='progressbar_1'>" +
	       "<span class='progress' style=width:"+listData[j].per+"></span>" +
	       	"</p></div>"+
	       "<div style='color:#bed8e0'>"+listData[j].value+"</div>"+
	       "</li>")
	}
}

barEVT(listData,"#barList2")

$(".barType li").click(function(){
	$(this).addClass("active").siblings().removeClass("active")
	var index=$(this).index()
    if(index==0){
    	var listData=[
    	    {name:'北京',value:88,per:0},
    	    {name:'广东',value:66,per:0},
    	    {name:'上海',value:59,per:0},
    	    {name:'浙江',value:37,per:0},
    	    {name:'山东',value:37,per:0},
    	    {name:'河北',value:34,per:0},
    	    {name:'江苏',value:34,per:0},
    	    {name:'福建',value:28,per:0},
    	    {name:'天津',value:24,per:0},
    	    {name:'四川',value:23,per:0},
    	]
    	$("#barList2 .barList").html("")
    	barEVT(listData,"#barList2")
    }
    if(index==1){
    	var listData=[
    	    {name:'蓝汛科技',value:889499,per:0},
    	    {name:'阿里云',value:380324,per:0},
    	    {name:'网宿科技',value:311730,per:0},
    	    {name:'腾讯云',value:148796,per:0},
    	    {name:'广东唯一',value:85892,per:0},
    	    {name:'帝联科技',value:32297,per:0},
    	    {name:'北京快网',value:13719,per:0},
    	    {name:'百度网讯',value:1499,per:0},
    	    {name:'同兴万点',value:745,per:0},
    	    {name:'北京动力在线',value:533,per:0},
    	]
    	$("#barList2 .barList").html("")
    	barEVT(listData,"#barList2")
    }
})


var idcData=[
    {name:'阿里云计算有限公司',value:740914,per:0},
    {name:'华为软件技术有限公司',value:64687,per:0},
    {name:'腾讯云计算（北京）有限责任公司',value:45196,per:0},
    {name:'北京百度网讯科技有限公司',value:33954,per:0},
    {name:'中国电信集团公司',value:21467,per:0},
    {name:'上海有孚网络股份有限公司',value:5354,per:0},
    {name:'广东一一五科技股份有限公司',value:5281,per:0},
    {name:'北京优帆科技有限公司',value:1442,per:0},
    {name:'广东睿江云计算股份有限公司',value:1066,per:0},
    {name:'厦门鑫点击网络科技股份有限公司',value:852,per:0},
]
barEVT(idcData,"#barList1")

$(".proType li").click(function(){
	$(this).addClass("active").siblings().removeClass("active")
	var index=$(this).index()
    if(index==0){
    	$("#barList1 .barList").html("")
    	$("#ecPieTabRight").hide()
    	$("#ecPieTabMiddle").hide()
    	$(".tab_classify_left").show()
    	idcData=[
    		 {name:'阿里云计算有限公司',value:740914,per:0},
    		    {name:'华为软件技术有限公司',value:64687,per:0},
    		    {name:'腾讯云计算（北京）有限责任公司',value:45196,per:0},
    		    {name:'北京百度网讯科技有限公司',value:33954,per:0},
    		    {name:'中国电信集团公司',value:21467,per:0},
    		    {name:'上海有孚网络股份有限公司',value:5354,per:0},
    		    {name:'广东一一五科技股份有限公司',value:5281,per:0},
    		    {name:'北京优帆科技有限公司',value:1442,per:0},
    		    {name:'广东睿江云计算股份有限公司',value:1066,per:0},
    		    {name:'厦门鑫点击网络科技股份有限公司',value:852,per:0},
    	]
    	
    	barEVT(idcData,"#barList1")
    }
    if(index==1){
    	$("#barList1 .barList").html("")
    	$(".tab_classify_left").hide()
    	$("#ecPieTabRight").hide()
    	$("#ecPieTabMiddle").show()
    }if(index==2){
    	$("#barList1 .barList").html("")
    	$(".tab_classify_left").hide()
    	$("#ecPieTabMiddle").hide()
    	$("#ecPieTabRight").show()
    }
})

var yunData=[
    {name:'阿里云计算有限公司',value:740914,per:0},
    {name:'华为软件技术有限公司',value:64687,per:0},
    {name:'腾讯云计算（北京）有限责任公司',value:45196,per:0},
    {name:'北京百度网讯科技有限公司',value:33954,per:0},
    {name:'中国电信集团公司',value:21467,per:0},
    {name:'上海有孚网络股份有限公司',value:5354,per:0},
    {name:'广东一一五科技股份有限公司',value:5281,per:0},
    {name:'北京优帆科技有限公司',value:1442,per:0},
    {name:'广东睿江云计算股份有限公司',value:1066,per:0},
    {name:'厦门鑫点击网络科技股份有限公司',value:852,per:0},
]
barEVT(yunData,"#barList3")


//饼图
/*var pielData=[
      {value:1789, name:'传统IDC'},
      {value:173, name:'CDN'},
      {value:274, name:'云计算'}
    ]

var legendDataL=function(data){
	var arr=[];
	for(var i=0;i<data.length;i++){
		arr.push(data[i].name)
	}
	return arr
}
pieOptionL = {
	color : ["#ffe34e",  "#93dd6e", "#ff8700"],
    title : {
    		show:false,
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        confine : true,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
    	show:false,
        orient: 'vertical',
        left: 'right',
        textStyle:{
        	color: '#fff'
        },
        data: legendDataL(pielData)
    },
    series : [
        {
          name: '',
          type: 'pie',
          radius : ['45%','65%'],
          center: ['50%', '50%'],
          data:pielData,
          itemStyle: {
          	normal:{
          		show:false
          	},
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          },
          labelLine: {
                normal: {
                    show: false
                }
            },
          label: {
              normal: {
                  show: false,
                  formatter: '{b}\n{c}\n{d}%'

              },
              emphasis: {
              	show: false,
                  formatter: '{b}\nIP:{c}\n{d}%'
              }
          },
        }
    ]
};

var pieChart = echarts.init(document.getElementById('ec_pie_nd'))
pieChart.setOption(pieOptionL);*/

/*var pieIndex1 = 0
var pieAutoShow = function(){
    if (pieIndex1 > pielData.length-1){
        pieIndex1 = 0
    }
    for (var i = 0;i < pielData.length;i++){
        if (i != pieIndex1){
            pieOptionL.series[0].data[i]['selected'] = false;
        }else{
            pieOptionL.series[0].data[i]['selected'] = true;
        }
    }
    //pieOptionL.series[1].data[0].label.normal.formatter = pieOptionL.series[0].data[pieIndex].value + ""
    pieOptionL.series[0].data[0].label.normal.formatter=parseInt(pieOptionL.series[0].data[pieIndex1].value/sum()*100) + "%"
    pieOptionL.series[0].data[1].label.normal.formatter = "" + pieOptionL.series[0].data[pieIndex1].name
    pie3Chart.setOption(pieOptionL)
    pieIndex1++
    setTimeout(pieAutoShow,1200)
}
pieAutoShow()*/


/*pieChart.on('click',function(param){
	for(var i=0;i<pielData.length;i++){
		pieOptionL.series[0].data[i]['selected']=false
	}
	pieOptionL.series[0].data[param.dataIndex]['selected']=true
	pieChart.setOption(pieOptionL);
})*/
//地图
var geoCoordMap = {};
var mapData=[
	{name:'东莞市',value:0,comp:536,room:680,ip:5221468,domain:15873681},
	{name:'中山市',value:0,comp:37 ,room:69 ,ip:98507  ,domain:90997   },
	{name:'云浮市',value:0,comp:69 ,room:128,ip:1689271,domain:2806582 },
	{name:'佛山市',value:0,comp:132,room:162,ip:1218036,domain:959816  },
	{name:'市辖区',value:0,comp:16 ,room:26 ,ip:114681 ,domain:182862  },
	{name:'广东省',value:0,comp:31 ,room:77 ,ip:782640 ,domain:1190842 },
	{name:'广州市',value:0,comp:83 ,room:116,ip:6590096,domain:7089482 },
	{name:'惠州市',value:0,comp:37 ,room:90 ,ip:181939 ,domain:104134  },
	{name:'揭阳市',value:0,comp:325,room:483,ip:4597909,domain:12530461},
	{name:'梅州市',value:0,comp:21 ,room:44 ,ip:1725308,domain:1543051 },
	{name:'汕头市',value:0,comp:14 ,room:43 ,ip:185745 ,domain:155578  },
	{name:'汕尾市',value:0,comp:94 ,room:189,ip:1420019,domain:7639244 },
	{name:'江门市',value:0,comp:29 ,room:70 ,ip:6221153,domain:2078774 },
	{name:'河源市',value:0,comp:82 ,room:136,ip:2784100,domain:1111634 },
	{name:'深圳市',value:0,comp:42 ,room:55 ,ip:767721 ,domain:2154536 },
	{name:'清远市',value:0,comp:159,room:252,ip:1686328,domain:4760153 },
	{name:'湛江市',value:0,comp:13 ,room:21 ,ip:223189 ,domain:50498   },
	{name:'潮州市',value:0,comp:83 ,room:136,ip:2260443,domain:4172605 },
	{name:'珠海市',value:0,comp:55 ,room:109,ip:2665234,domain:4582440 },
	{name:'肇庆市',value:0,comp:10 ,room:14 ,ip:309585 ,domain:34320   },
	{name:'茂名市',value:0,comp:86 ,room:158,ip:4357215,domain:1641189 },
	{name:'长沙市',value:0,comp:5  ,room:7  ,ip:10978  ,domain:25739   },
	{name:'阳江市',value:0,comp:25 ,room:61 ,ip:111445 ,domain:43362   },
	{name:'韶关市',value:0,comp:69 ,room:114,ip:208081 ,domain:1753662 },
]
var convertData = function (data) {
	console.log(data)
  var res = [];
  for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
          res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              comp: data[i].comp,
             	room: data[i].room,
             	ip: data[i].ip,
             	domain: data[i].domain,
             	rank: data[i].rank
          });
      }
  }
//console.log(res,'--22----')
  return res;
};
//重新渲染地图数据
function mapEvt(){
	var max1=mapData[0].comp
	var max2=mapData[0].room
	var max3=mapData[0].ip
	var max4=mapData[0].domain
	for(var i=0;i<mapData.length;i++){
		for(var j=0;j<mapData.length;j++){
			if( max1 <= mapData[j].comp ){    
				max1 = mapData[j].comp
			} 
			if( max2 <= mapData[j].room ){    
				max2 = mapData[j].room 
			}
			if( max3 <= mapData[j].ip ){    
				max3 = mapData[j].ip
			}
			if( max4 <= mapData[j].domain ){    
				max4 = mapData[j].domain
			}
		}
		mapData[i].value=(mapData[i].comp/max1+mapData[i].room/max2+mapData[i].ip/max3+mapData[i].domain/max4).toFixed(2)
	}
}
mapEvt(mapData)
function rank(data){
	var newData=data.sort(function(a,b){
		return b.value-a.value
	})
	for(var i=0;i<data.length;i++){
		newData[i].rank=i+1
	}
	return newData
}
rank(mapData)

var mapFeatures = echarts.getMap('广东').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});

var classString=['up','down'];

var optionMap = {
	tooltip: {
		trigger: 'item',
		formatter:function(param){
			var province = param.name;
			if(province !='香港' && province !='澳门' && province !='台湾' ){
				return  '<div>'+param.name+'</div>' +
				        '<div>接入企业数：'+param.data.comp+'</div>'+
						'<div>机房数：'+param.data.room+'</div>'+
						'<div>ip数：'+param.data.ip+'</div>'+
						'<div>域名数：'+param.data.domain+'</div>';
			}
		}
	},
	geo: {
		show: true,
		zoom: 0.9,
		roam: false,
		map:'广东',
		itemStyle: {
			normal: {
				show:false,
				borderColor: '#285ac6',
				borderWidth: 1,
				areaColor: '#123082',
				shadowBlur: 3,
				shadowColor:'#081435',
				shadowOffsetX: -4,
				shadowOffsetY: 8
			},
			emphasis: {
				areaColor: '#fce24f',
				borderColor: '#fce24f'
			}
		}
	},
	series: [{
		type: 'map',
		zoom: 0.9,
		mapType: '广东',
//		geoIndex: 0,
		roam: false,
		label: {
			normal: {
				show: false,
				textStyle: {
					color: '#fff'
				}
			},
			emphasis: {
				show: true,
				textStyle: {
					color: '#fff'
				}
			}
		},
		itemStyle: {
			normal: {
				show:false,
				borderColor: '#3770ea',
				borderWidth: 1,
				areaColor: '#0f2d87'
			},
			emphasis: {
				areaColor: '#2a56bd',
				borderColor: '#2a56bd',
//				opacity: 0.8,
			}
		},
		data:convertData(mapData.sort(function (a, b) {
          return b.value - a.value;
      }))
	},{
	  name: 'Top 5',
      type: 'effectScatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
          return val[2]*4+8;
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
	  data:convertData(mapData.sort(function (a, b) {
          return b.value - a.value;
      }).slice(0, 5))
	},{
	name: 'Top 5',
      type: 'scatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
          return val[2]*4+8;
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
	  data:convertData(mapData.sort(function (a, b) {
          return b.value - a.value;
      }).slice(5))
	}]
};
var mapChart = echarts.init(document.getElementById('ec_map_nd'))
mapChart.setOption(optionMap)

//根据地图数据轮播
var count = 0;
var timer = null;
var dataLength = optionMap.series[0].data.length;
var cityShow=function() {
	$("#ranklistRight3 .tab_content").html("")
    var style = 'up';
	var rank = mapData[count% dataLength].rank;
    if(rank == 1){
    	style = 'up';
    }else{
    	style = classString[parseInt(Math.random()*10)%2];
    }
	$("#ranklistRight3 .tab_content").append("<tr>"+
    "<td>"+mapData[count% dataLength].name+"</td>"+
    "<td>"+(mapData[count% dataLength].value*2.5).toFixed(1)+"</td>"+
    "<td>"+mapData[count% dataLength].rank+"</td>"+
    "<td><div class="+style+ "></div></td>"+
	"</tr>")
    mapChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
    });
    mapChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: (count) % dataLength
    });
    mapChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: (count) % dataLength
    });
    count++;
}
cityShow()
timer = setInterval(cityShow, 2000);

mapChart.on('mouseover',function(params){
	clearInterval(timer);
//	keyRank(params);
	//console.log(params,'------');
	var style = 'up';
	var rank = params.data.rank;
    if(rank == 1){
    	style = 'up';
    }else{
    	style = classString[parseInt(Math.random()*10)%2];
    }
	$("#ranklistRight3 .tab_content").html("")
    $("#ranklistRight3 .tab_content").append("<tr>"+
    "<td>"+params.data.name+"</td>"+
    "<td>"+(params.data.value[2]*2.5).toFixed(1)+"</td>"+
    "<td>"+params.data.rank+"</td>"+
    "<td><div class="+style + "></div></td>"+
	"</tr>")
})
mapChart.on('mouseout',function(){
	clearInterval(timer)
	timer=setInterval(cityShow,2000)
})


function mapListEvt(name){
	$("#ranklistRight5 .tab_content").html("")
	for(var j=0;j<mapData.length;j++){
		if(mapData[j].name==name){
			 $("#ranklistRight5 .tab_content").append("<tr>"+
		                "<td>"+mapData[j].name+"</td>"+
		                "<td>"+mapData[j].comp+"</td>"+
		                "<td>"+mapData[j].room+"</td>"+
		                "<td>"+mapData[j].ip+"</td>"+
		                "<td>"+mapData[j].domain+"</td>"+
		            +"</tr>")
		}
	}
}

mapChart.on("mouseover", function (params){   
//	console.log(params.data.name)
	var name=params.data.name
    mapChart.dispatchAction({  
    	type: 'downplay', 
    	name: ['台湾','澳门','香港','']
    });    
});  


//饼图
var dataLeft=[{value:40292871, name:'IDC'},
              {value:4523217, name:'CDN'},
              {value:675268, name:'专线'},
              {value:1786256, name:'云计算'}]

var dataRight=[{value:33978422, name:'IDC'},
    			{value:657136, name:'CDN'},
    			{value:606605, name:'专线'},
    			{value:2701523, name:'云计算'}]

var dataPieTabMiddle=[{value:93, name:'基础企业'},
              {value:1696, name:'增值企业'}]

var dataPieTabRight=[{value:1261, name:'单一地区'},
              {value:528, name:'跨地区'}]

var pieOption = function(){
	return {
		color : ["#ffe34e",  "#93dd6e","#00a9e1", "#ff8700","#0046af","#360293"],
    title : {
    	show:false,
      text: '某站点用户访问来源',
      subtext: '纯属虚构',
      x:'center'
    },
    tooltip : {
        trigger: 'item',
        confine : true,//显示的位置调整
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
    		bottom:'14%',
    		textStyle:{
    			color: 'rgba(255,255,255,0.8)'
    		},
        orient: 'horizontal',
        data:legendData()
    },
    series : [
        {
          name: '',
          type: 'pie',
          radius : '65%',
          center: ['45%', '40%'],
//          data: 
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
          },
          lableLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
          },
        }
    ]
	}
}

function legendData(data){
	var arr=[];
	for(var i=0;i<data.length;i++){
		arr.push(data[i].name)
	}
	return arr
}

//折线图
var dataX=['2013','2014','2015','2016','2017','2018']
var data1=[13,12,12,12,11,11,8,8,6,4]
var data2=[25,7,2,3,9,3,1,2,2,2]
var data3=[15,17,2,13,19,31,11,12,2,2]
var data4=[52,27,22,3,29,23,21,22,22,22]
var lineOption = {
		color:["#ff9100","#4fe3de","#a1f379","#e5004f"],
    tooltip: {
        trigger: 'axis'
//      axisPointer: {
//          type: 'cross',
//          crossStyle: {
//              color: '#999'
//          }
//      }
    },
    toolbox: {
    	show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
    	show:true,
    	top:10,
    	textStyle:{
    		color:'#fff'
    	},
      data:['IDC','CDN','云','总数']
    },
    grid: {
        left:35,
        top: 45,
        right:10,
        bottom:'15%'
    },
    xAxis: [
        {
          type: 'category',
          data: dataX,
          boundaryGap : false,
          axisPointer: {
//            type: 'none'
          },
          axisLabel:{
          	color:'#c0d4da',
        	rotate : 25,
          },
	        axisLine:{
	        	show:true,
	        	lineStyle:{
	        		color:'#c0d4da'
	        	}
	        }
        }
    ],
    yAxis: [
        {
          type: 'value',
          name: '单位',
          min: 0,
//        max: 250,
//        interval: 50,
          axisLabel: {
            color:'#c0d4da'
          },
          axisLine:{
	        	show:true,
	        	lineStyle:{
	        		color:'#c0d4da'
	        	}
        	},
        	splitLine:{
        		lineStyle:{
	        		color:'#272858'
	        	}
        	}
        }
    ],
    series: [
      {name:'IDC',
        type:'line',
        smooth:true,
        symbol: 'circle',
        data:[124,232,363,337,239,55]
      },{
        name:'CDN',
        type:'line',
        smooth:true,
        symbol: 'circle',
        data:[0,0,0,4,66,34]
      },{
        name:'云',
        type:'line',
        smooth:true,
        symbol: 'circle',
        data:[0,0,0,14,104,72]
      },{
        name:'总数',
        type:'line',
        smooth:true,
        symbol: 'circle',
        data:[124,232,362,355,409,161]
      }
    ]
};

var lineChart = echarts.init(document.getElementById('ecLine'))
lineChart.setOption(lineOption)

//柱状图
var dataBar1=[13,12,12,12,11,11,8,8,6,4]
var dataBar2=[5,7,2,3,9,3,1,2,2,2]
var barOption = {
		color:["#c8fd6f","#08e2ca"],
    tooltip: {
        trigger: 'axis'
//      axisPointer: {
//          type: 'cross',
//          crossStyle: {
//              color: '#999'
//          }
//      }
    },
    toolbox: {
    	show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
    	show:true,
    	top:'top',
    	textStyle:{
    		color:'#fff'
    	},
      data:['单一地区','跨地区']
    },
    grid: {
        left:35,
        top: 45,
        right:10,
        bottom: 35
    },
    xAxis: [
        {
          type: 'category',
          data: dataX,
          axisPointer: {
              type: 'shadow'
          },
          axisLabel:{
          	color:'#c0d4da',
          	rotate : 25,
          },
	        axisLine:{
	        	show:true,
	        	lineStyle:{
	        		color:'#c0d4da'
	        	}
	        }
        }
    ],
    yAxis: [
        {
          type: 'value',
          name: '单位',
          min: 0,
//        max: 250,
//        interval: 50,
          axisLabel: {
            color:'#c0d4da'
          },
          axisLine:{
	        	show:true,
	        	lineStyle:{
	        		color:'#c0d4da'
	        	}
        	},
        	splitLine:{
        		lineStyle:{
	        		color:'#272858'
	        	}
        	}
        }
    ],
    series: [
      {
        name:'单一地区',
        type:'bar',
        barWidth:'25%',
        data:[81,151,203,179,124,34]
      },{
        name:'跨地区',
        type:'bar',
        barWidth:'25%',
        data:[43,81,159,158,115,21]
      }
    ]
};

var barChart = echarts.init(document.getElementById('ecBar'))
barChart.setOption(barOption)


window.addEventListener("resize", function () {
   // lineChart.resize();
//  pieChart.resize();
    mapChart.resize();
    barChart.resize();
    lineChart.resize();
    myBarChart.resize()
});

function rightPie(pieData,ele,num,color){
    var pie3Opt = {
        color:color,
        backgroundColor: 'transparent',
        tooltip : {
            trigger: 'item',
          //  formatter: "{a} <br/>{b} : {c} ({d}%)",
            position:'right',
            formatter:function(param){
                if(param.name){
                	return  '<div>'+param.name+'</div>' +
			        '<div>'+param.value+'  ('+param.percent+'%)</div>'
                }
    		}
        },
        legend: {
	    		left:'left',
	    		textStyle:{
	    			color: 'rgba(255,255,255,0.8)'
	    		},
	        show : false,
	        orient: 'vertical',
	        data:legendData(pieData)
		    },
        series: [{
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['45%', '50%'],
            hoverAnimation: true,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '30',  
                        fontWeight: 'bold'
                    }
                }
            },
            data: pieData
        },{
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['45%', '50%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 0,
                label: {
                    normal: {
                        formatter: '38',
                        textStyle: {
                            color: '#20fd07',
                            fontSize: 25,
                            fontWeight: 'bold'
                        }
                    }
                }
            }, {
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        formatter: '\n门户',
                        textStyle: {
                            color: '#bbeaf9',
                            fontSize: 12
                        }
                    }
                }
            }]
        }]
    };

    var pie3Chart = echarts.init(document.getElementById(ele))
    pie3Chart.setOption(pie3Opt)
    window.addEventListener("resize", function () {
        pie3Chart.resize();
    });
    var pieIndex = 0
    var t
    function pieAutoShow(){
        if (pieIndex >num-1){
            pieIndex = 0
        }
        for (var i = 0;i <num;i++){
            if (i != pieIndex){
                pie3Opt.series[0].data[i]['selected'] = false;
            }else{
                pie3Opt.series[0].data[i]['selected'] = true;
            }
        }
        pie3Opt.series[1].data[0].label.normal.formatter = (pie3Opt.series[0].data[pieIndex].value/allData(pieData)*100).toFixed(1) + "%"
       // pie3Opt.series[1].data[0].label.normal.formatter=parseInt(Math.random()*99) + "%"
        pie3Opt.series[1].data[1].label.normal.formatter = "" + pie3Opt.series[0].data[pieIndex].name
        pie3Chart.setOption(pie3Opt)
        pieIndex++
    }
    pieAutoShow()
    t=window.setInterval(pieAutoShow,1200)
}

function allData(data){
	var allNum=0
	for(var a=0;a<data.length;a++){
		allNum+=data[a].value
	}
	return allNum
}
var pielData=[
    {value:1863, name:'IDC'},
    {value:196, name:'CDN'},
    {value:372, name:'云计算'}
  ]
var color1 = ["#ffe34e",  "#93dd6e", "#ff8700","#09e2cb"]
var color2 = ["#ffe34e",  "#93dd6e", "#ff8700","#09e2cb"]

rightPie(pielData,"ec_pie_nd",3,color1)
//rightPie(dataRight,"pieBoxRight",4,color2)


var pieTabMiddel=pieOption();
pieTabMiddel.legend.orient='vertical';
pieTabMiddel.legend.right='20';
pieTabMiddel.legend.top='middle';
pieTabMiddel.series[0].radius='80%'
pieTabMiddel.series[0].center=['45%','50%']
pieTabMiddel.series[0].data=dataPieTabMiddle;
pieTabMiddel.legend.data=legendData(dataPieTabMiddle);
var pieTabMiddleChart = echarts.init(document.getElementById('ecPieTabMiddle'))
pieTabMiddleChart.setOption(pieTabMiddel);

var pieTabRight=pieOption();
pieTabRight.series[0].data=dataPieTabRight;
pieTabRight.legend.orient='vertical';
pieTabRight.legend.right='20';
pieTabRight.legend.top='middle';
pieTabRight.series[0].radius='80%'
pieTabRight.series[0].center=['45%','50%']
pieTabRight.legend.data=legendData(dataPieTabRight);
var pieTabRightChart = echarts.init(document.getElementById('ecPieTabRight'))
pieTabRightChart.setOption(pieTabRight);


